let css = new CSSStyleSheet()
css.replaceSync(`

        `);
document.adoptedStyleSheets.push(css)

class ZConfig extends HTMLElement {
    static observedAttributes = [];
    constructor() {
        super();
        let self = this;
        let media = window.matchMedia('(prefers-color-scheme: dark)')

        function activateToggleMode(isDarkMode) {
            if (self.classList.contains('z-dark-keep')) {
                self.classList.toggle('z-dark', true);
                document.body.classList.toggle('z-dark-con',true);
                return;
            }
            self.classList.toggle('z-dark', isDarkMode);
            document.body.classList.toggle('z-dark-con',isDarkMode);
        }

        activateToggleMode(media?.matches)
        media?.addEventListener("change", e =>  activateToggleMode(e.matches));

        // console.dir(this.children)
        setTimeout(() => {
            this.classList.add("ready");
        })
    }
    getTplBefore() {
        return document.getElementById(this.getAttribute('tplbefore'))?.content.cloneNode(true);
    }
}

customElements.define('z-config', ZConfig);